<template>
	<view class="content">
		<text v-if="foil">{{name}}</text>
		<text v-for="(item,index) in kind" :key="index">-{{item}}-</text>
		<view><text v-for="(item,index) in vocabulary" :key="index">{{item.prone}}--</text>
		<button size="mini" type="default" @click="spectacle()">按钮</button>
		</view>
		<block v-for="(item,index) in kind" :key="index"><view v-if="index&1">{{item}}</view></block><!-- block在页面中不会渲染该元素，利用位运算奇偶数判断是否显示元素 -->
		<view class="uni-form-item uni-column">
			<view class="title">实时获取输入值：{{contempt}}</view>
			<input class="uni-input" placeholder="输入同步到view中" :value="contempt" @input="onKeyInput" /> <!-- 与在input标签中使用v-model="contempt"属性实现双向绑定效果一致 -->
		</view>
		<view class="pic"><image src="https://www.runoob.com/wp-content/uploads/2014/03/nodejs.jpg" :mode="whirl" /><text>昵称</text><button type="primary" plain="true" @click="toggleMode">切换图片模式</button></view><!-- 给属性加上:,可以解析变量 -->
		<view><video id="mesh" src="https://www.runoob.com/try/demo_source/movie.mp4"></video></view>
		<view>
			<radio-group><radio v-for="(item,index) in kind" :value="index.toString()">{{item}}</radio></radio-group>
			<radio-group @change="hugselected"><radio v-for="(item,index) in hug" :value="item.swamp">{{item.recipient}}</radio></radio-group>
			<checkbox-group @change="checkboxsel"><checkbox v-for="(item) in hug" :value="item.swamp">{{item.recipient}}</checkbox></checkbox-group>
			<button @click="valid">验证多选是否正确</button>
		</view>
		<rotate :intrigue="juwenile" />
		<view><button @click="cane(1,23,4,45,22)">可变函数传参</button></view>
		<wat />
	</view>
</template>

<script setup>
	import { ref,onMounted, reactive } from 'vue'
	const name =ref('tom')
	const kind = ref(["apple","proposition","symmetry"])
	const foil = ref(false)
	const vocabulary = ref([{
		"porch":"foul",
		"prone":"stroll"
	},{
		"porch":"hurl",	
		"prone":"barren"
	}])
	onMounted(() => {
		console.info(kind)// 模拟是否有wifi,有wifi就自动播放，否则就不自动播放
		console.info(uni.createVideoContext('mesh')) //打印video支持方法
	})
	// 效果一致
	// function spectacle(){ console.info("123")}
	const spectacle = () => { foil.value = !foil.value }
	//表单元素
	const contempt = ref('你好')
	const onKeyInput = () => { contempt.value = event.target.value }
	//图片
	let whirl = ref("aspectFill")
	let juwenile = ["https://www.php20.cn/Upload/oneblog/article/20230217114829192.png",
	"https://www.php20.cn/Upload/oneblog/article/20230217122148942.png"]
	
	const toggleMode = () => { whirl.value = 'center' }
	//form
	const hug = reactive([
		{recipient:"veil",swamp:"bride"},
		{recipient:"plague",swamp:"stump"},
		{recipient:"temperament",swamp:"plea"},
		{recipient:"sue",swamp:"bully"}
	])
	const hugselected = (event) => {
		console.info(event.detail.value)
	}
	const memberAnswer = reactive([])
	const checkboxsel = (event) => {
		memberAnswer.value = event.detail.value
	}
	const valid = (event) => {
		const crew = ["stump","plea"] // 正确答案
		console.info(memberAnswer)
		//motal弹窗
		uni.showModal({
			title: '提示',
				content: '您确定要提交嘛？',
				success: function (res) {
					if (res.confirm) {
			
						//数组判断是否一致
						if(memberAnswer.value.every((item)=>crew.includes(item))){
								uni.showToast({
									title:'选择正确',
									icon:'success',
									duration:1000
								})
						}else{
							uni.showToast({
								title:'选择错误',
								icon:'error',
								duration:1000
							})
						}

					} else if (res.cancel) {

					}
				}
		})
	}
	// 函数传参
	function cane(){
		// 模拟请求加载
		uni.showLoading({
			title: '加载中',
			complete:setTimeout(()=>{
				uni.hideLoading()
				console.log(arguments)
			},1000)
		})
	}
	// 箭头函数没有arguments作用域，所以以下是错误的
	//const cane = () => console.log(arguments)
	// import vue file
	import wat from "@/pages/trail/watch.vue"
	import rotate from "@/pages/trail/rotate.vue"
	
</script>

<style lang="less">
	.pic{
		display: flex;align-items: center;
		image{width:100px;height:100px;border-radius:50%;}
	}
</style>
